$grid-style: flex !default;
$grid-column-width: 54px !default;
$grid-gutter: 30px !default;
$grid-columns: 12 !default;
$grid-max-width: $grid-column-width * $grid-columns + ($grid-columns - 1) * $grid-gutter !default;

@function grid-width($columns, $last-column, $font-size) {
  $width: $columns * $grid-column-width + $columns * $grid-gutter;

  @if $last-column == true {
    $width: $width - $grid-gutter;
  }

  @return grid-size($width, $font-size);
}

@function grid-size($size, $font-size) {
  @if $grid-style == flex {
    @return $size / $grid-max-width * 100%;
  } @else {
    @return em($size, $font-size);
  }
}

@mixin columns($how-many, $last-column: false, $font-size: $font-size-base) {
  width: grid-width($how-many, true, $font-size);

  @if $last-column == false {
    margin-right: grid-size($grid-gutter, $font-size);
  }
}

@mixin shift-columns($how-many, $font-size: $font-size-base) {
  margin-left: grid-width($how-many, false, $font-size);
}
